<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
		<!-- 页面內容 -->
			<view class="grace-rows" style="margin: 10rpx 0;">
				<view @tap="weishiyong_tap()" style="margin-left: 40rpx;" :class="weishiyong" >未使用</view>
				<view @tap="yishiyong_tap()" style="margin-left: 40rpx;" :class="yishiyong">已使用</view>
			</view>
			<!-- <view style="height: 84rpx;"></view> -->
			<scroll-view :style="{height: (sys.safeArea.height-48)+'px'}" :scroll-y="true" @scrolltolower="jiazai">
				<view v-for="(item,index) in show_info_list" :key="index" style="margin-top: 20rpx;">
					<view  style=" width: 714rpx;height: 248rpx;background-size: contain;margin: 0 auto;background-repeat: no-repeat;" :style="{backgroundImage:'url('+item.tubiao+')'}">
						<view class="grace-flex grace-columns" style="position: relative;">
							<text  style="position: absolute; left: 310rpx;top: 30rpx; font-size:22rpx;font-weight:bold;color:rgba(51,51,51,1);">有效期：{{ item.end_time }}</text>
							<image @tap="card_chai(item.id)" v-show="item.cai===1" src="../../static/card_coupon_chai.png" style="position: absolute;top: 83rpx;left: 357rpx; width: 140rpx;height: 140rpx;"></image>
							<text style="position: absolute;top: 203rpx;left: 130rpx; font-size:20rpx;font-weight:bold;color:rgba(51,51,51,1);">{{ item.tiaojian}}</text>
							<!-- <view v-show="!chai_show" style="position: absolute;top: 83rpx;left: 357rpx;width: 187rpx;font-size:23rpx;color:rgba(51,51,51,1);font-weight:bold;">注意事项：可拆开成3张优惠券，单张优惠券无转让功能</view> -->
						</view>
						<view class="grace-flex-center" style="position: relative;">
							<view @tap="Goto('/pages/personal_center/card_coupon_zhuanrang?diyongquanbianma='+item.my_num+'&quan_id='+item.id)" v-show="item.zhuan===1" style="position: absolute;top: 40rpx;left: 568rpx; text-align: center;  width:130rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:bold;color:rgba(239,131,80,1);line-height:40rpx;">转让给用户</view>
							<view @tap="shiyong_tap(item.id)" v-show="item.shiyong===1" style="position: absolute;top: 125rpx;left: 568rpx; text-align: center;  width:130rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:bold;color:rgba(239,131,80,1);line-height:40rpx;">使用</view>
							<view v-show="item.lijishiyong===1" @tap="Goto('/pages/card_keeper/card_keeper')" style="position: absolute;top: 140rpx;left: 568rpx; text-align: center;  width:130rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:bold;color:rgba(239,131,80,1);line-height:40rpx;">立即使用</view>
							<view style="position: absolute;top: 180rpx;left: 568rpx; font-size:20rpx;font-weight:bold;color:rgba(255,255,255,1);">编号：</view>
							<view style="position: absolute;top: 210rpx;left: 561rpx; font-size:18rpx;font-weight:bold;color:rgba(255,255,255,1);">{{ item.my_num }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 遮罩弹窗 -->
			<graceShade background ="rgba(0,0,0,0.8)" :show="show">
							<view style="width:540rpx;height:520rpx;background:rgba(255,255,255,1);border-radius:10rpx;">
								<view style="position: relative;left:135rpx ;top: 20rpx;  font-size:36rpx;font-weight:bold;color:rgba(51,51,51,1);">拆分成功！获得：</view>
								<image :src="tupian" style="width: 488rpx;height: 320rpx;position: relative;top: 35rpx;left: 25rpx;"></image>
								<view @tap="c_tanchuang" style="position: relative;top: 60rpx; width:540rpx;height:90rpx;background:rgba(218,28,30,1);border-radius:10rpx;font-size:34rpx;font-weight:400;color:rgba(255,255,255,1);text-align: center;line-height: 90rpx;">我知道了</view>
							</view>
			</graceShade>
			
		
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	export default {
		data() {
			return {
				tupian:'../../static/card_coupon2_chai.png',
				show_info_list:[],
				weishiyong:'xuanzhong',
				yishiyong:'weixuanzhong',
				chai_show:false,
				zhuangrang:true,
				show : false,
				page:0,
				limit:20,
				type:'可用',
			}
		},
		onShow:function(){
			this.show_info_list=[];
			this.page=0;
			this.jiazai();
		},
		methods:{
			shiyong_tap(id){
				var vm=this;
				vm.req.post(
				vm.lochost+'/mytrunk/discounts/shi_yong',
				{id:id},
				{},
				function(res){
					vm.show_info_list=[];
					vm.page=0;
					vm.jiazai();
					vm.msg_show(res.msg);
					
				}
				)
			},
			show_tanchuang(){
				this.show=true;
			},
			c_tanchuang(){
				this.show=false;
			},
			card_chai(id){
				var vm=this;
				vm.req.post(
				vm.lochost+'/mytrunk/discounts/chaifen',
				{id:id},
				{},
				function(res){
					vm.tupian=res.data.tupian;
					vm.show_info_list=[];
					vm.page=0;
					vm.jiazai();
					vm.show_tanchuang();
					
				}
				)
			},
			jiazai(){
				this.page+=1;
				this.get_info();
			},
			get_info(){
				var vm=this;
				vm.req.post(
				vm.lochost+'/mytrunk/discounts/club_card_list2',
				{
					page:vm.page,
					limit:vm.limit,
					type:vm.type,
				},
				{},
				function(res){
					var data=res.data;
					for (let i = 0; i < data.length; i++) {
						vm.show_info_list.push(data[i]) 
					}
				}
				)
			},
			weishiyong_tap(){
				this.weishiyong='xuanzhong';
				this.yishiyong='weixuanzhong';
				this.show_info_list=[];
				this.type='可用',
				this.page=0;
				this.jiazai();
			},
			yishiyong_tap(){
				this.weishiyong='weixuanzhong';
				this.yishiyong='xuanzhong';
				this.show_info_list=[];
				this.type='已用',
				this.page=0;
				this.jiazai();
			}
		},
		components:{
			gracePage,
			graceShade
		}
	}
</script>

<style>
	.xuanzhong{
		width:320rpx;height:74rpx;border:5rpx solid rgba(48,207,0,1);box-shadow:2rpx 2rpx 0px 0px rgba(10,2,4,0.29);font-size:30rpx;font-weight:500;color:rgba(48,207,0,1);text-align: center;line-height: 74rpx;
	}
	.weixuanzhong{
		width:320rpx;
		height:74rpx;
		border:2rpx solid rgba(153,153,153,1);
		font-size:30rpx;
		font-weight:500;
		color:rgba(153,153,153,1);
		text-align: center;
		line-height: 74rpx;
	}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
